<template>
	<view :style="{
			height: $height()+'px',
			'background-color': '#F4F4F4'
	}">
		<u-navbar :is-back="true" title="訂單管理" title-bold />
		<view class="top">
			<text @click="type=index" v-for="(item,index) in list" :class="{
				text:type==index?true:false
			}">{{item.name}}</text>
		</view>
		<block v-for="(item,index) in 5">
			<view class="carp" @click="$to('/pages/shopping/purchase')">
				<view class="carp_1">
					<text>訂單編號：sp852476</text>
					<!-- <text>2021.05.21 23:00:00</text> -->
					<text style="color: #999999;">2021.05.21 23:00:00</text>
					<text>待付款</text>
				</view>
				<view class="carp_2">
					<view class="carp_2_1">
						<image
							src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-08/164673620358762.png" />
					</view>
					<view class="carp_2_2">
						<view class="carp_2_2_1">
							<text>拉菲(LAFITE)傳奇波爾 多 赤霞珠幹紅葡萄酒</text>
							<text>￥249.00</text>
						</view>
						<view class="carp_2_2_2">
							<text>拉菲傳奇波爾多一瓶禮盒裝</text>
							<text>x1</text>
						</view>
						<view class="carp_2_2_2">
							<text>優惠券</text>
							<text>無</text>
						</view>
					</view>
				</view>
				<view class="xian">
				</view>
				<view class="carp_3">
					<view class="carp_3_1">
						<text>訂單金額：</text>
						<text>
							<text style="font-size: 24rpx;color:#AB1E25;font-weight: 600; ">￥</text>
							299.00</text>
					</view>
					<view class="carp_3_2">
						<text>取消訂單</text>
						<text class="lan"
						 @click.stop="$to('/pages/shopping/purchase')"
						>去付款</text>
				<!-- <text class="lan"  @click.stop="$to('/pages/shopping/purchase')">去查看</text> -->
					</view>
				</view>
			</view>
			<u-gap height="15" bg-color="rgb(244,244,244)"></u-gap>
		</block>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				list: [{
					name: '全部訂單'
				}, {
					name: '待支付'
				}, {
					name: '待發貨'
				}, {
					name: '待簽收'
				}, {
					name: '已完成'
				}]

			};
		}
	}
</script>

<style lang="scss">
	.carp {
		padding: 30rpx;
		background-color: white;

		.xian {
			height: 1rpx;
			background: #EEEEEE;
			margin-top: 30rpx;
		}

		.carp_3 {
			margin-top: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.carp_3_2 {
				display: flex;

				text:nth-of-type(1) {
					width: 176rpx;
					height: 70rpx;
					background: #FFFFFF;
					border: 1rpx solid #BFBFBF;
					border-radius: 35rpx;
					text-align: center;
					line-height: 70rpx;
					display: block;
				}

				.lan {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: 600;
					color: #00795E;
					height: 70rpx;
					width: 176rpx;
					background: #FFFFFF;
					border: 1rpx solid #00795E;
					border-radius: 35px;
					border-radius: 35rpx;
					text-align: center;
					line-height: 70rpx;
					display: block;
				}
			}

			.carp_3_1 {
				text:nth-of-type(1) {
					font-size: 24rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #666666;
				}

				text:nth-of-type(2) {
					font-size: 34rpx;
					font-family: Source Han Serif CN;
					font-weight: 800;
					color: #AB1E25;
				}
			}
		}

		.carp_2 {
			display: flex;
			justify-content: space-between;

			.carp_2_2 {
				width: 65%;
				margin-top: 30rpx;

				.carp_2_2_2 {
					margin-top: 15rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text:nth-of-type(1) {
						font-size: 24rpx;
						font-family: Source Han Serif CN;
						font-weight: 400;
						color: #999999;
					}

					text:nth-of-type(2) {
						font-size: 26rpx;
						font-family: Source Han Serif CN;
						font-weight: 500;
						color: #999999;

					}
				}

				.carp_2_2_1 {
					display: flex;
					justify-content: space-between;


					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: Source Han Serif CN;
						font-weight: 600;
						color: #181818;
					}

					text:nth-of-type(2) {
						font-size: 30rpx;
						font-family: Source Han Serif CN;
						font-weight: bold;
						color: #181818;
					}
				}
			}

			.carp_2_1 {
				margin-top: 30rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

		}

		.carp_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text:nth-of-type(1) {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}

			text:nth-of-type(2) {
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #AB1E25;
			}

			text:nth-of-type(3) {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #00795E;
			}
		}

	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;

		.text {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #181818;
		}

		text {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
	}
</style>
